<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三级联动</title>
</head>
<body>
<select name="province" id="province">

    <option value="-1">请选择</option>
</select>

<select neme="city" id="city">  <option value="-1">请选择</option>
</select>
<select name="country" id="country">
    <option value="-1">请选择</option>
</select>

<script>


    // 省份数组
    var provinceArr = ['上海', '江苏', '河北'];
    // 城市数组
    var cityArr = [
        ['上海市'],
        ['苏州市', '南京市', '扬州市'],
        ['石家庄', '秦皇岛', '张家口']
    ];
    // 区域数组
    var countryArr = [
        [
            ['黄浦区', '静安区', '长宁区', '浦东区']
        ], [
            ['虎丘区', '吴中区', '相城区', '姑苏区', '吴江区'],
            ['玄武区', '秦淮区', '建邺区', '鼓楼区', '浦口区'],
            ['邗江区', '广陵区', '江都区']
        ], [
            ['长安区', '桥西区', '新华区', '井陉矿区'],
            ['海港区', '山海关区', '北戴河区', '抚宁区'],
            ['桥东区', '桥西区', '宣化区', '下花园区']
        ]
    ];


    let province =  document.getElementById('province');
    let city=document.getElementById('city')
    let country=document.getElementById('country')

    for(let i=0;i<provinceArr.length;i++){
        let option = new Option(provinceArr[i],i);
        province.options.add(option);

    }
    province.onchange = function(e){
        city.options.length=1;
        console.log(province.value);
        let citys =cityArr[province.value];
        for(let i=0;i<citys.length;i++){
            let option=new Option(citys[i],i);
            city.options.add(option);

        }
        country.options.length=1;
    }
    city.onchange =function(e){
        country.options.length=1;

        let countrys= countryArr[province.value][city.value];
        for(let i=0; i<countrys.length;i++){
            let option =new Option(countrys[i],i);
            country.options.add(option);
        }
    }







    let option = new Option("上海");
    let option2=new Option('江苏');
    province.options.add(option);
    province.options.add(option2);



</script>
</body>
